<!DOCTYPE html>
<html lang="en">
<head>
<title>SunivoWeb | Demo</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="Huazz Tsai">
<meta name="keyword" content="">
<link rel="shortcut icon" href="../ico/favicon.png">
<link rel="apple-touch-icon" href="../ico/favicon.png">
<!--[if lt IE 9]>
<script type="text/javascript" src="../script/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="../css/sunivoweb.frame.css"/>
<link rel="stylesheet" href="../css/reset.css"/>
<script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
<script>(function($){$.initover = function(fn) {$(document).one('initover', fn);}})(jQuery);</script>
<style type="text/css">
h3, h4{font-weight: normal;}
section{margin-bottom: 40px;}
section > h3{border-bottom:2px solid #ddd;}
.imgbox{border:1px solid #ddd;width:218px;height:218px;margin-top:8px;background-color:#fafafa;}
.hack{margin-bottom: 10px;color:#fff;padding:10px 20px;font-size:16px;font-style: italic;}
/* hack */
.hack{
    background: yellowgreen;  /*for all*/
    background: orange\9;  /*IE6+*/
    background: #008000\0;  /*IE8+*/
    *background: cyan;   /*IE7、IE6*/
    _background: red;  /*IE6*/
}
:root .hack{
    background: blue\9;  /*IE9+*/
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .hack {background: deeppink;}  /*webkit*/
}
</style>
</head>
<body class="bg">
    <nav class="navbar navbar-fixed-top topbar" id="topbar">
        <div class="navbar-inner">
            <div class="container">
                <a href="index.html" class="brand">SunivoWeb</a>
                <ul class="nav">
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">DEMOS <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html#table">表格 - table</a></li>
                            <li><a href="index.html#form">表单 - form</a></li>
                            <li><a href="index.html#pagination">分页 - pagination</a></li>
                            <li><a href="index.html#hack">CSS HACK</a></li>
                            <li><a href="../lib/bootstrap/docs/" target="_blank">BOOTSTRAP</a></li>
                        </ul>
                    </li>
                    <li class="dropdown dropdown-split">
                        <a href="#">SPLIT菜单</a>
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="">001</a></li>
                            <li><a href="">002</a></li>
                            <li><a href="">003</a></li>
                        </ul>
                    </li>
                    <li class="dropdown dropdown-hover">
                        <a class="relative dropdown-toggle">HOVER菜单<b class="caret"></b><span class="tag">8</span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><b>99+</b>My Orders</a></li>
                            <li><a href="#"><b>3</b>My Inquiries</a></li>
                            <li><a href="#"><b>5</b>My Complaint</a></li>
                            <li><a href="#"><b>3</b>Messages</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">分享 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:chemon.share.sina();">新浪微博</a></li>
                            <li><a href="javascript:chemon.share.qq();">腾讯微博</a></li>
                            <li><a href="javascript:chemon.share.twitter();">Twitter</a></li>
                            <li><a href="javascript:chemon.share.facebook();">Facebook</a></li>
                        </ul>
                    </li>
                </ul><!-- nav end-->
                <ul class="nav pull-right">
                    <li class="navbar-text">欢迎你，游客！</li>
                    <li><a href="#loginModal" data-toggle="modal">登录</a></li>
                    <li><a href="">注册</a></li>
                    <li class="dropdown dropdown-hover">
                        <a class="text-blue dropdown-toggle" href="javascript:void(0);">Hi!Lind <b class="caret"></b></a>
                        <ul class="dropdown-menu pull-right">
                            <li><a class="user-info" href="javascript:void(0);"><span class="imgbox"><img src="" alt=""/></span><span class="email">lind@sunivo.com</span></a></li>
                            <li><a href="">Accout settings</a></li>
                            <li><a href="">Sign out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav><div class="undertopbar"></div>
    <!-- topbar end-->

    <!-- HEADER -->
    <header>
        <div class="container">
            <div class="main-menu">
                <a href="javascript:void(0);"><i></i>Categroies</a>
                <ul class="unstyled main-list relative">
                    <li>
                        <a href="javascript:void(0);"><i></i>Industrial chemicals</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=1">

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i></i>Food &amp; Feed Additives</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=2">

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i></i>Fine chemicals</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=3">

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i></i>Pharmaceuticals</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=4">

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i></i>Polymers &amp; Resins</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=5">

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i></i>Others</a>
                        <ul class="sub-list" data-ajaxurl="../loadpage/menu-list.html?t=6">

                        </ul>
                    </li>
                </ul>
            </div><!-- main menu end-->
            <form id="searchingForm" class="searching-form" action="" method="post">
                <div class="input-append clearfix">
                    <input autocomplete="off" type="text" class="searching-input" placeholder="Product/CAS/Supplier" name="keywords" id="searchingInput" autocomplete-url="../server/autocomplete.json" />
                    <input type="radio" class="hide" name="area" value="0" checked id="area_pro" />
                    <input type="radio" class="hide" name="area" value="1" id="area_sup" />
                    <div class="btn-group btn-group-vertical label-group">
                        <label data-target="#area_pro"><i class="searic-pro"></i> Product <i class="caret-down"></i></label>
                        <label data-target="#area_sup"><i class="searic-sup"></i> Supplier <i class="caret-down"></i></label>
                    </div>
                    <button class="btn btn-warning" type="submit"><i class="searic-btn"></i> Search</button>
                </div>
            </form>
        </div>
    </header><!--HEADER END-->

    <div class="namespace main">
        <ul class="breadcrumb">
            <li><a href="javascript:window.history.back();">Go back</a></li>
            <li class="divider">|</li>
            <li><a href="">Home</a></li>
            <li class="divider">&gt;</li>
            <li><a href="">Demo</a></li>
            <li class="divider">&gt;</li>
            <li class="active">index</li>
        </ul>
        <section id="table">
            <h3>表格 - table</h3>
            <table class="table table-bordered table-striped table-hover bg-white">
                <thead>
                <tr>
                    <th>颜色</th>
                    <th>色块</th>
                    <th>色值</th>
                    <th>class名</th>
                </tr>
                </thead>
                <tbody>
                <tr class="text-blue">
                    <td>蓝色</td>
                    <td><button class="btn btn-primary btn-mini">blue</button></td>
                    <td>#0099ff</td>
                    <td>text-blue, btn-primary</td>
                </tr>
                <tr class="text-warning">
                    <td>橙色</td>
                    <td><button class="btn btn-warning btn-mini">orange</button></td>
                    <td>#eb6100</td>
                    <td>text-warning, btn-warning</td>
                </tr>
                <tr class="text-info">
                    <td>紫色</td>
                    <td><button class="btn btn-info btn-mini">purple</button></td>
                    <td>#5637aa</td>
                    <td>text-info, btn-info</td>
                </tr>
                <tr class="text-error">
                    <td>红色</td>
                    <td><button class="btn btn-danger btn-mini">red</button></td>
                    <td>#e60012</td>
                    <td>text-error, btn-danger</td>
                </tr>
                <tr class="text-success">
                    <td>绿色</td>
                    <td><button class="btn btn-success btn-mini">green</button></td>
                    <td>#009900</td>
                    <td>text-success, btn-success</td>
                </tr>
                </tbody>
            </table>
            <div class="alert alert-info">
                <button class="close">&times;</button>
                <h4>TIPS</h4>
                .table为最基本的表格，只有横向边框，.table-bordered表示全边框，.table-condensed表示较为紧缩的表格。<br>表格默认有20px的margin-bottom。
            </div>
        </section>

        <section id="form">
            <h3>表单 - form</h3>
            <form action="" method="post" class="form-horizontal">
                <div class="control-group">
                    <label for="form_email" class="control-label">邮箱自动补全</label>
                    <div class="controls">
                        <input type="text" class="email" name="email" id="form_email"/>
                        <small class="help-inline">input.email，邮箱自动补全</small>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="form_select">下拉选框</label>
                    <div class="controls">
                        <select name="select" id="form_select" class="chosen">
                        	<option></option>
                            <option value="01">001</option>
                            <option value="02">002</option>
                            <option value="03">003</option>
                        </select>
                        <small class="help-inline">select.chosen</small>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">单选框</label>
                    <div class="controls">
                        <label class="radio inline"><input checked class="icheck" type="radio" name="gender" /> 先生</label>
                        <label class="radio inline"><input class="icheck orange" type="radio" name="gender" /> 女士</label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">复选框</label>
                    <div class="controls">
                        <label class="checkbox inline"><input checked type="checkbox" value="1" class="icheck" name="checkbox" /> 蓝色</label>
                        <label class="checkbox inline"><input checked type="checkbox" value="2" class="icheck red" name="checkbox" /> 红色</label>
                        <label class="checkbox inline"><input checked type="checkbox" value="3" class="icheck orange" name="checkbox" /> 橙色</label>
                        <label class="checkbox inline"><input checked type="checkbox" value="4" class="icheck green" name="checkbox" /> 绿色</label>
                        <label class="checkbox inline"><input checked type="checkbox" value="5" class="icheck purple" name="checkbox" /> 紫色</label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">input+button组</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" style="width:148px;" />
                            <button class="btn btn-inverse" type="button">BTN</button>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="form_datepicker">日期选择器</label>
                    <div class="controls">
                        <input class="date-picker" type="text" name="datepicker" data-startdate="2000-01-01"/>
                        <small class="help-inline">input.date-picker, data-date-start-date:起始时间</small>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="form_timepicker">时间选择器</label>
                    <div class="controls">
                        <input class="time-picker" id="form_timepicker" type="text" />
                        <small class="help-inline">input.time-picker, data-show-seconds='true':显示秒</small>
                    </div>
                </div>
                <div class="control-group">
                    <label for="form_portSelector" class="control-label">港口选择器</label>
                    <div class="controls">
                        <input class="portSelector" type="text" name="port" id="form_portSelector" data-cn="false" data-sea="true" data-region="foreign" />
                        <small class="help-inline">input.portSelector, data-cn='true/false':中/英文, data-region='foreign/domestic':国外/内数据</small>
                    </div>
                </div>
                <div class="control-group file-group">
                    <label for="form_picture" class="control-label">文件上传</label>
                    <div class="controls">
                        <label for="form_picture" class="file-label btn btn-primary btn-small">选择文件
                            <input type="file" data-uploadurl="../server/upload.php" name="picture" id="form_picture"/>
                        </label> &nbsp;&nbsp;<span class="file-return"></span><br>
                        <input class="file-return" type="text" name="pictureUrl" readonly style="margin-top:8px;" /><br>
                        <div class="imgbox"><img src="" class="file-return" alt=""/></div>
                        <small class="help-block">上传组件.file-group中包括：label.file-label(必需，入口), input:file(上传表单，必需), .file-return(如果为input则会将返回的name填充，如果为img则会将返回的url填充到src，其它类型则会将返回的info填充到text)</small>
                        <!--<small class="help-block">上传进度： <span class="file-progress"></span></small>-->
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">&nbsp;</label>
                    <div class="controls">
                        <button class="btn btn-primary" type="submit">SUBMIT</button>
                        <button class="btn btn-info" type="reset">CANCEL</button>
                    </div>
                </div>
            </form>
            <div class="alert">
                <button class="close">&times;</button>
                <h4>TIPS</h4>
                .control-group默认有20px的margin-bottom，.control-label的默认宽度是130px，水平表单需要在form上加form-horizontal的class。
            </div>
        </section>

        <section id="pagination">
            <h3>分页 - pagination</h3>
            <div class="pagination">
                <ul>
                    <li class="disabled"><a href="javascript:void(0);">&laquo;</a></li>
                    <li class="active"><a href="javascript:void(0);">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">&raquo;</a></li>
                </ul>
            </div>
            <div class="pagination pagination-centered">
                <ul>
                    <li class="disabled"><a href="javascript:void(0);">&laquo;</a></li>
                    <li class="active"><a href="javascript:void(0);">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">&raquo;</a></li>
                </ul>
            </div>
            <div class="pagination pagination-right">
                <ul>
                    <li class="disabled"><a href="javascript:void(0);">&laquo;</a></li>
                    <li class="active"><a href="javascript:void(0);">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">&raquo;</a></li>
                </ul>
            </div>
            <div class="alert alert-success">
                <button class="close">&times;</button>
                <h4>TIPS</h4>
                默认: 左对齐, .pagination-centered : 居中, pagination-right : 右对齐
            </div>
        </section>

        <section id="hack">
            <h3>CSS HACK</h3>
            <div class="hack">CSS HACK BAR</div>
            <pre>
<em class="muted">/** CSS HACK **/</em>
.hack{
    <span style="color:yellowgreen;">background: yellowgreen;   <em class="muted">/** for all **/</em></span>
    <span style="color:orange;">background: orange\9;      <em class="muted">/** IE6+ **/</em></span>
    <span style="color:#008000">background: #008000\0;     <em class="muted">/** IE8+ **/</em></span>
    <span style="color:cyan;">*background: cyan;         <em class="muted">/** IE7、IE6 **/</em></span>
    <span style="color:red;">_background: red;          <em class="muted">/** IE6 **/</em></span>
}

:root .hack{
    <span style="color:blue;">background: blue\9;        <em class="muted">/** IE9+ **/</em></span>
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    <span style="color:deeppink;">.hack {background: deeppink;}  <em class="muted">/** webkit **/</em></span>
}
            </pre>
            <div class="alert alert-error">
                <button class="close">&times;</button>
                <h4>TIPS</h4>
                Hack有风险，使用须谨慎！
            </div>
        </section>
    </div>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <ul class="unstyled clearfix link-list">
                <li><a href="">About SunivoWeb</a></li>
                <li><a href="">Corporerative Partner</a></li>
                <li><a href="">Friendly Link</a></li>
                <li><a href="">SiteMap</a></li>
            </ul>
            <p>Copyright © 2014 SunivoWeb Inc. All Rights Reserved. Designated trademarks and brands are the property of their respective owners. </p>
            <p>Use of this Web site constitutes acceptance of the Chemon <a href="">User Agreement</a> and <a href="">Privacy Policy</a>. </p>
        </div>
    </footer>
    <a href="#top" id="scrolltop" title="back top"><i></i></a>

    <!-- fixed sections -->
    <div class="modal fade hide" id="loginModal">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h3>LOGIN</h3>
        </div>
        <form class="modal-form form-horizontal" action="" method="post">
            <div class="modal-body">
                <div class="control-group">
                    <label class="control-label" for="login_username">USERNAME</label>
                    <div class="controls">
                        <input type="text" name="username" id="login_username"/>
                        <small class="help-inline">*</small>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="login_password">PASSWORD</label>
                    <div class="controls">
                        <input type="text" name="password" id="login_password"/>
                        <small class="help-inline">*</small>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">登录</button>
                <button class="btn" type="button" data-dismiss="modal">取消</button>
            </div>
        </form>
    </div>

<!-- script -->
<script type="text/javascript">
$.initover(function() {
    /*$("#form_picture").data("callback", function(data, statusText) {
        $.ajax({
            url : "../server/save.php",
            type : "get",
            data : {avatar : data.url},
            success : function(msg) {
                var data = $.parseJSON(msg);
                if (data.success) alert("info : " + data.message);
                else alert("error : " + data.message);
            },
            error : function(msg) {
                var data = $.parseJSON(msg);
                alert("error: " + data.message);
            }
        });
    });*/
    $("#form_picture").data("callback", "../server/save.php").data("key", "avatar");
    app.initWithContext("handleEmailAutocomplete,handleFileupload", "#form");
});
</script>
<script type="text/javascript" src="../script/sunivoweb.frame.js"></script>
<script type="text/javascript" src="../script/ports.js"></script>
<script type="text/javascript" src="../script/portSelector.js"></script>
<script type="text/javascript" src="../script/sunivoweb.app.js"></script>
<script type="text/javascript">
$(function() {
    app.init();
//    app.initWithContext('handleDatepicker,handleChosen','#form');
});
</script>
</body>
</html>